<template>
  <view
    class="trade-index-tabs-container"
    :class="{ darkStyle: theme == 'dark' }"
  >
    <view class="trade-index-tabs-wrap">
      <view
        class="trade-index-item"
        v-for="(item, index) in list"
        :class="{ active: index == current }"
        :data-current="index"
        @click.stop="onTabChange"
        :key="index"
      >
        <span class="index-tab-label">{{ item.name }}</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: () => [] },
    current: { type: Number | String, default: 0 },
  },
  data() {
    return {};
  },
  methods: {
    onTabChange(e) {
      const current = e.currentTarget.dataset.current;
      this.$emit("onTabChange", current);
    },
  },
};
</script>

<style lang="less" scoped>
.trade-index-tabs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  &.darkStyle {
    .trade-index-tabs-wrap {
      border: 0.2rpx solid @border-color-dark;
      .trade-index-item {
        border-left: 0.2rpx solid @border-color-dark;
      }
    }
  }
  .trade-index-tabs-wrap {
    display: flex;
    // background-color: @white;
    border: 0.2rpx solid #ececee;
    .trade-index-item {
      padding: 0 30rpx;
      height: 54rpx;
      line-height: 54rpx;
      border-left: 0.2rpx solid #ececee;
      &.active {
        background-color: @brand-color;
        .index-tab-label {
          color: @white;
        }
      }
      &:first-child {
        border-left: none;
      }
      .index-tab-label {
        color: #b9bbd4;
      }
    }
  }
}
</style>
